<template>
<van-field label="" :rules="rules">
  <template #input>
    <van-radio-group v-model="pickerValue">
      <van-cell-group>
        <van-cell v-for="item in option" :key="item.value" clickable @click="changeValue(item.value)">
          <template #right-icon>
            <van-radio :name="item.value">{{ item.label }}</van-radio>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </template>
</van-field>
</template>

<script>
export default {
  props: [ 'value', 'option', "rules" ],
  data() {
    return {
      pickerValue: ''
    } 
  },
  watch: {
    value() {
      if (this.value || this.value === 0) {
        this.pickerValue = this.value;
        return ;
      }
      this.pickerValue = '';
    }
  },
  methods: {
    changeValue(value) {
      this.pickerValue = value;
      this.$emit('input', value);
    }
  },
  mounted() {
    if (this.value || this.value === 0) {
      this.pickerValue = this.value;
    }
  }
}
</script>
